<template>
    <div class="wrap">
        <div class="zhihui">
           
            
        </div>
        
        <div class="inner-wrap">
            <van-field
            readonly
            clickable
            name="picker"
            :value="villages"
            label="小区"
            placeholder="点击选择"
            @click="villagePicker = true"
            />
            <van-button @click="enter" class="btn" type="primary" block>进入系统</van-button>
        </div>
        <van-popup v-model="villagePicker" position="bottom">
            <van-picker
                show-toolbar
                :columns="villagecolumns"
                @confirm="villageConfirm"
                @cancel="villagePicker = false"
            />
        </van-popup>
    </div>
</template>

<script>
import { Notify,Toast } from 'vant';
import api from '../api/type.js'
    export default {
        data: function () {
            return {
                data:{},
                village:'',
                villagecolumns:[],
                villagePicker:false,
                villages:'',
            }
        },
        created(){
            
        },
        mounted() {
            let that=this
            api.queryAllCommunity().then(e=>{
                that.villagecolumns=e.data.map(item=>{
                    item.text=item.name
                    item.type=item.id
                    return item
                })
               
            }).catch(err=>{
                console.log(err)
            })
        },

        methods: {
            enter(){
                if(this.village){
                    api.getInfo().then(e=>{
                        let village=this.village
                        let villages=this.villages
                        if(e.data.pictureId){
                            this.$router.push({path:'/tiandan',query:{village,villages}})
                        }else{
                            this.$router.push('/myinfo')
                        }
                        
                    }).catch(err=>{
                        console.log(err)
                    })
                    
                }else{
                    Toast('请选择小区信息')
                }
                
            },
            villageConfirm(val){
               console.log(val)
               this.village=val.type
               this.villages=val.text
               this.villagePicker=false
            }
           
        }
    }

</script>
<style lang="scss">
@import "../common.scss";
.now-title{
    color:#fff;
    margin-top:10px;
    margin-bottom:15px;
    font-size:px2rem(10px)
}
.num-item{
    color:#fff;
        font-size:px2rem(10px)
    }
</style>
<style lang="scss" scoped>
@import "../common.scss";
    
    .zhihui{
        position:fixed;
        text-align: center;
        top:15vh;
        width:100%;
        font-size:px2rem(16px);    }
    .wrap{
        height:100vh;
        background:url(./bg.png);
        background-size:100% 100%;
        display:flex;
        align-items: center;
    }
    .inner-wrap{
        width:80%;
        margin:0 auto;
    }
    .btn{
        margin-top:42px;
    }
</style>